<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ip}}</h1>
        <!-- 计算属性的使用和普通data中的属性变量是一样的 -->
        <h1>{{reverseIP}}</h1>
        <button @click="fun">reverse</button>
        <h2>{{reverseIP}}</h2>
        <h3>{{reverseIP}}</h3>
        <h4>{{reverseIP}}</h4>
        <h5>{{reverseIP}}</h5>
        <h6>{{reverseIP}}</h6>
    </div>
    <script>
        Vue.config.productionTip = false //关闭生成信息提示
        var vm = new Vue({
            el: '#app',
            data: {
                ip: '123.456.789.111'
            },
            methods: {
                fun() {
                    //计算属性具体操作代码:
                    let arr = this.ip.split('.')
                    let new_ip = arr.reverse().join('.')
                    this.ip = new_ip
                },
            },
            computed: {
                //定义计算属性，可以定义多个
                //计算属性定义使用函数形式定义，函数名就是计算属性的名字
                //计算属性功能是：反转IP变量的数据，反转以后变为111，987，654，321这样操作再计算
                reverseIP() {
                    //计算属性具体操作代码:
                    let arr = this.ip.split('.')
                    let new_ip = arr.reverse().join('.')
                    return new_ip

                    /*
                    '123.456.789.111'分割处理，按照分割符
                    split('.')按照，进行分割，返回是一个数组，数组中存放就是ip的4个数字
                    [123.456.789.111] 反转，调用数组中反转的方法 .reverse()
                    数组变为[111.789.456.123] 还是数组，不是ip字符串
                    数组.join('.')将数组中的元素按照分割符拼接成新的字符型 111.789.456.123
                    */
                },
            }
        })
    </script>
</body>

</html>